<template>
	<div class="like">
	  <Card>
	      <span>猜你喜欢</span>
	  </Card>
	  <ul>
	  	<li 
		v-for="(item,index) in likeList"
		:key="index"
		@click="goDetail(item.id)"
		>
			<h2>
				<img v-lazy="item.imgUrl" alt="" />
			</h2>
			<h3>{{item.name}}</h3>
			<div>
				<span>￥</span>
				<b>{{item.price}}</b>
			</div>
		</li>
	  </ul>
	    
	</div>
</template>

<script>
	import Card from "@/components/home/Card.vue"
	import { Lazyload } from 'mint-ui';
	export default{
		props:{
			likeList:Array
		},
		
		components:{
			Card,
			
		},
		methods:{
			goDetail(id){
				this.$router.push({
					path:'/detail',
					query:{
						id:id
					}

				})
			}
		}
	}
</script>

<style scoped>
.like ul{
	display: flex;
	flex-wrap: wrap;
}
.like ul  li{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
}

.like h3{
	padding: 0 0.375rem;
	width: 90%;
	font-size: 1rem;
	font-weight: 400;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.like ul li > div{
	/* 使文字居左 */
	width: 90%;
	padding: 0.375rem;
	text-align: left; 
	color: red;
}
.like ul li > div span{
	font-size: 0.75rem;
}
.like ul li > div b{
	font-weight: 600;
	font-size: 1rem;

}
.like img{
	width: 11rem;
	height: 11rem;
}
.like img[lazy=loading]{
	background-color: #f7f7f7;
}
</style>